<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        position: relative;
        left: 310px;
      }
    </style>
  </head>
  <body>
    <h1 id="head" style="color: aquamarine;">计算器</h1>
		<input type="text" id="txt1" />
		
		<select id="op">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
			<option value="%">%</option>
		</select>
		
		<input type="text" id="txt2" />=<input type="text" id="result"/>
		
		<input type="button" onclick="computes()" value="计算"/>
    <script>
      function computes(){
			let num1 = document.getElementById("txt1").value;
			let num2 = document.getElementById("txt2").value;
			let opp = document.getElementById("op").value;
			//判断两个数值不能为空
			if (num1.trim()!="" && num2.trim()!="") {
				//判断是否为数字
				if (!isNaN(num1)&&!isNaN(num2)) {
					document.getElementById("result").value = eval(num1+opp+num2)
				} else{
					alert("请输入正确数值！")
				}
			} else{
				alert("请输入两个操作数值!")
			}
		}
    </script>
  </body>
</html>
